<template>
	<view class="goods_detail">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in thumImagesLists" :key="item.pics_id"><image :src="item.pics_big_url" @click="HandelPreviewImage(item.pics_big_url)"></image></swiper-item>
		</swiper>
		<block v-for="item in itemLists" :key="item.goods_id">
			<view class="box1">
				<view class="price">
					<text>￥{{ item.goods_price }}</text>
					<image :src="isCollect ? collection_icon_a : collection_icon" style="width:50rpx;height: 50rpx;" @click="handelCollection"></image>
				</view>
				<view class="infos">{{ item.title }}</view>
			</view>
			<view class="borderLine"></view>
			<view class="box3">
				<view class="header-title"><text>详情介绍</text></view>
				<view class="content"><rich-text :nodes="item.goods_introduce"></rich-text></view>
			</view>
			<view class="goods_nav"><uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view>
		</block>
	</view>
</template>

<script>
import { apiGoodDetailLists } from '../../util/user.js';
import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue';
export default {
	components: {
		uniGoodsNav
	},
	data() {
		return {
			isCollect: false,
			isCart: false,
			itemLists: [],
			collection_icon: '../../static/icon/likes.png',
			collection_icon_a: '../../static/icon/likes_a.png',
			queryParams: {
				goods_id: 0
			},
			infoLists: {
				goods_price: null,
				title: '',
				content: ''
			},
			thumImagesLists: [],
			descLists: [],
			options: [
				{
					icon: 'headphones',
					text: '客服'
				},
				{
					icon: 'shop',
					text: '店铺',
					info: 0,
					infoBackgroundColor: '#007aff',
					infoColor: 'red'
				},
				{
					icon: 'cart',
					text: '购物车',
					info: 0
				}
			],
			buttonGroup: [
				{
					text: '加入购物车',
					backgroundColor: '#ff0000',
					color: '#fff'
				},
				{
					text: '立即购买',
					backgroundColor: '#ffa200',
					color: '#fff'
				}
			]
		};
	},
	methods: {
		getThumImagesLists() {
			apiGoodDetailLists(this.queryParams).then(res => {
				this.itemLists.push(res.data.message);
				this.cartItemLists = res.data.message;
				// console.log(this.itemLists[0]);
				this.thumImagesLists = res.data.message.pics;
				// this.handelCollection();
				console.log(this.itemLists.goods_id)
			});
		},
		//导航栏的事件
		onClick(e) {
			if (e.index === 0) {
				//跳转到客服
				uni.showToast({
					title: '此功能正在开发中..',
					icon: 'none'
				});
			} else if (e.index === 1) {
				//跳转到店铺
				uni.showToast({
					title: '此功能正在开发中..',
					icon: 'none'
				});
			} else {
				// console.log("跳转到购物车的页面")
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			}
		},
		//购物车的数量
		getCartNum(){
			this.options[2].info = uni.getStorageSync('cart').length;
		},
		//加入购物车
		buttonClick(e) {
			let cart = uni.getStorageSync('cart') || [];
			// 判断商品是否被加入购物车
			// console.log(this.cartItemLists)
			let index = cart.findIndex(v => v.goods_id === this.cartItemLists.goods_id);
			// 当被收藏过了index ！= -1；
			if (index === -1) {
				this.cartItemLists.num = 1;
				this.cartItemLists.checked = true;
				cart.push(this.cartItemLists)
				uni.showToast({
					title: '加入成功',
					icon:'success',
					mask: true
				});
			}else{
				cart[index].num++
			}
			// 把数组存入缓存中
			uni.setStorageSync('cart', cart);
			this.getCartNum();
		},
		// 收藏
		handelCollection() {
			// 获取缓存中的商品数组
			let collect = uni.getStorageSync('collect') || [];
			// 判断商品是否被收藏
			// console.log(this.itemLists[0])
			let index = collect.findIndex(v => v.goods_id === this.itemLists[0].goods_id);
			// 当被收藏过了index ！= -1；
			if (index !== -1) {
				// 已被收藏，在数组中删除该商品
				collect.splice(index, 1);
				this.isCollect = false;
				uni.showToast({
					title: '取消收藏',
					mask: true
				});
			} else {
				// 没有收藏过
				collect.push(this.itemLists[0]);
				this.isCollect = true;
				uni.showToast({
					title: '收藏成功',
					icon: 'success',
					mask: true
				});
			}
			// 把数组存入缓存中
			uni.setStorageSync('collect', collect);
		},
		// 点击轮播图放大预览
		HandelPreviewImage(pics_big_url) {
			// console.log("放大预览");
			console.log(pics_big_url)
			// 构造预览图数组
			const urls = this.thumImagesLists.map(v => v.pics_big_url);
			// 接受传递过来的参数
			const current = pics_big_url
			wx.previewImage({
				current: current,
				urls: urls
			});
		}
	},
	onLoad(options) {
		this.queryParams.goods_id = options.goods_id;
		this.getThumImagesLists();
		this.getCartNum();
	}
};
</script>

<style lang="scss" scoped>
.goods_detail {
	swiper {
		height: 700rpx;
		swiper-item {
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.box1 {
		margin-bottom: 35rpx;
		.price {
			display: flex;
			justify-content: space-between;
			margin: 10rpx 50rpx;
			text {
				font-weight: 700;
				color: #b50e03;
			}
			text:nth-child(2) {
				text-decoration: line-through;
				font-size: 22rpx;
				color: #ccc;
			}
		}
		.infos {
			margin: 0 15rpx;
			text-indent: 30rpx;
			letter-spacing: 10rpx;
		}
	}
	.box2 {
		text-indent: 30rpx;
		letter-spacing: 5rpx;
		margin-bottom: 15rpx;
		.article_number {
			line-height: 60rpx;
		}
		.stock {
			line-height: 60rpx;
		}
	}
	.box3 {
		text-indent: 60rpx;
		padding-bottom: 50rpx;
		.header-title {
			line-height: 70rpx;
			text {
				font-size: 32rpx;
				border-bottom: 1rpx solid #eee;
			}
		}
		.content {
			font-size: 28rpx;
			color: #333;
			margin-top: 15rpx;
			line-height: 50rpx;
		}
	}
	.goods_nav {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
}
.borderLine {
	width: 750rpx;
	height: 10rpx;
	background-color: #ccc;
}
</style>
